import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import * as dat from 'dat.gui'



/**
 * Scene
 */

const scene = new THREE.Scene()



/**
 * Material
 */
const material = new THREE.MeshStandardMaterial()
material.metalness = 0
material.roughness = 0.5


/**
 * Geometry
 */
const planeGeometry = new THREE.PlaneGeometry(5, 5)
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 16)
const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5)
const torusGeometry = new THREE.TorusGeometry(0.5, 0.2, 12, 48)

/**
 * Objects
 */
const plane = new THREE.Mesh(planeGeometry, material)
plane.rotation.set(-Math.PI / 2, 0, 0)
plane.position.set(0, -1, 0)
const sphere = new THREE.Mesh(sphereGeometry, material)
sphere.position.set(-1, 0, 0)
const box = new THREE.Mesh(boxGeometry, material)
const torus = new THREE.Mesh(torusGeometry, material)
torus.position.set(1.5, 0, 0)
scene.add(plane, sphere, box, torus)


/**
 * Lights
 */
const ambient = new THREE.AmbientLight('#ffffff', 0.5);
scene.add(ambient)

// DirectionalLight
const directionalLight = new THREE.DirectionalLight('#ffffaa', 0.5)
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight)
// scene.add(directionalLight)
// scene.add(directionalLightHelper)



// HemisphereLight
const hemisphereLight = new THREE.HemisphereLight('#B71C1C', '#004D40', 0.5)
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight);
// scene.add(hemisphereLight)
// scene.add(hemisphereLightHelper)


// PointLight
const pointLight = new THREE.PointLight(0xff9000,0.5,5,2)
pointLight.position.set(1,1,1)
const pointLightHelper = new THREE.PointLightHelper(pointLight)
// scene.add(pointLight)
// scene.add(pointLightHelper)


// RectAreaLight
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 10, 1, 1)
rectAreaLight.position.set(-1.5, 0, 1.5)
rectAreaLight.lookAt(new THREE.Vector3(0,0,0))
// scene.add(rectAreaLight)

// SpotLight 
const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
scene.add(spotLight)

const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)




/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.set(1, 1, 8)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)



/**
 * OrbitControls
 */
const orbitControls = new OrbitControls(camera, canvas)
orbitControls.enableDamping = true


const tick = () => {
    orbitControls.update();
    renderer.render(scene, camera)
    spotLightHelper.update()
    requestAnimationFrame(tick)
}


tick()



/**
 * Debug
 */
const gui = new dat.GUI();
gui.add(material,'metalness').min(0).max(1).step(0.001)
gui.add(material,'roughness').min(0).max(1).step(0.001)

// directionalLight
const directionalLightFolder = gui.addFolder('directionalLight')
directionalLightFolder.add(directionalLight,'visible').onChange((visible)=>{
    directionalLight.visible = visible
})
directionalLightFolder.add(directionalLight,'intensity').min(0).max(1).step(0.001)

// hemisphereLight
const hemisphereLightFolder = gui.addFolder('hemisphereLight')
hemisphereLightFolder.add(hemisphereLight,'visible').onChange((visible)=>{
    hemisphereLight.visible = visible
})
hemisphereLightFolder.add(hemisphereLight,'intensity').min(0).max(1).step(0.001)
hemisphereLightFolder.add(hemisphereLight.position,'x').min(-2.5).max(2.5).step(0.001)
hemisphereLightFolder.add(hemisphereLight.position,'y').min(-2.5).max(2.5).step(0.001)
hemisphereLightFolder.add(hemisphereLight.position,'z').min(-2.5).max(2.5).step(0.001)

// pointLight
const pointLightFolder = gui.addFolder('pointLight')
pointLightFolder.add(pointLight,'visible').onChange((visible)=>{
    pointLight.visible = visible
})
pointLightFolder.add(pointLight, 'distance', 0, 10, 0.001)
pointLightFolder.add(pointLight, 'decay', 0, 10, 0.001)

// rectAreaLight
const rectAreaLightFolder = gui.addFolder('rectAreaLight')
rectAreaLightFolder.add(rectAreaLight,'visible').onChange((visible)=>{
    rectAreaLight.visible = visible
})
rectAreaLightFolder.add(rectAreaLight, 'intensity', 0, 80, 0.0001)
rectAreaLightFolder.add(rectAreaLight, 'width', 0, 5, 0.0001)
rectAreaLightFolder.add(rectAreaLight, 'height', 0, 5, 0.0001)


// SpotLight
const spotLightFolder = gui.addFolder('SpotLight')
spotLightFolder.add(spotLight, 'intensity', 0, 5, 0.001)
spotLightFolder.add(spotLight, 'distance', 0, 20, 0.001)
spotLightFolder.add(spotLight, 'angle', 0, Math.PI / 2, 0.001)
spotLightFolder.add(spotLight, 'penumbra', 0, 1, 0.001)
spotLightFolder.add(spotLight, 'decay', 0, 10, 0.001)
